vuex：专为vue开发的一个状态管理模式，相当于保存数据的一个大仓库，可以在任何地方对数据进行改变，其他组件中使用该数据时可以实时更新。

localstorage：浏览器缓存，将数据保存在本地，除非被清除，否则永久保存。

两者区别：

1.vuex中的数据是保存在内存，所以刷新页面相当于是清除内存，vuex中保存的数据会清空。而localstorage中的数据是保存在本地，刷新页面数据仍然存在。

2.vuex主要用于多组件通信，在其中一个组件中改变数据时，其他组件实时获取。而localstorage不会。

3.vuex经常用于保存需要经常改变的数据，如果数据不怎么改变的话，可以考虑只使用localstorage保存，多个页面获取使用。

可以结合两者，实现组件内通信，同时刷新页面时数据不丢失。

实现代码：

1.vuex：

2.其中一个组件中改变数据：

3.其他组件中监听数据的改变，并做出其他操作：

注意：

1.在监听数据catalog_id时，需要先使用computed计算出该数据在state中的值，然后再使用watch监听数据的变化，做其他操作。

2.将catalog_id直接在data中赋值，数据改变时，通过watch是监听不到的，因为data里的数据在组件加载完成后就初始化完了，只能被动改变，不能自动做出更新。

3.只使用localstorage存储数据，通过watch也是监听不到的，因为数据保存在本地，不在内存中。

4.vuex结合localstorage，就相当于是在set和get值时，多使用了localstorage来存储和获取。关于vuex的详细介绍，下次补上。

5.state中存的数据的值和通过get来取数据的值，因为多了一层localstorage，刷新之后会不同。

参考链接：https://www.cnblogs.com/1rookie/p/9516126.html